<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="manifest" href="../../manifest.json" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- <meta name="viewport"
        content="width=device-width，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.e，user-scalable=no" /> -->
    <title>Code Blockly - Python - DEV</title>
    <meta name="description" content="新一代图形化编辑器" />
    <link rel="shortcut icon" href="../../static/logo/logo_dev_lite.svg" type="image/x-icon" />
    <script>
        window.onload = function () {
            document.querySelector("html > body > div#loading").style.opacity = 0
            setTimeout(() => {
                document.querySelector("html > body > div#loading").remove();
            }, 300)
        };
    </script>
    <link href="../../static/files/colour/egg/idiom.json" rel="prefetch">
</head>

<body class="mdui-appbar-with-toolbar mdui-theme-accent-blue">
    <div id="loading">
        <style>
            #loading {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                align-content: center;
                position: fixed;
                background-color: #fffa;
                color: rgb(0, 132, 255);
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 99999999999999999999999999999999999999999999999999999999999;
                transition: .3s;
            }

            #loading>b {
                font-size: 30px;
            }

            #loading>span {
                font-size: 16px;
            }

            #loading>div>div {
                width: 50px;
                height: 50px;
                margin-bottom: 10px;
            }

            #loading .mdui-spinner-layer {
                border-color: rgb(0, 132, 255);
            }

            .mdui-spinner {
                position: relative;
                display: inline-block;
                width: 28px;
                height: 28px;
                -webkit-animation: mdui-spinner 1568ms linear infinite;
                animation: mdui-spinner 1568ms linear infinite
            }

            @-webkit-keyframes mdui-spinner {
                to {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg)
                }
            }

            @keyframes mdui-spinner {
                to {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg)
                }
            }

            .mdui-spinner-layer {
                position: absolute;
                width: 100%;
                height: 100%;
                border-color: #3f51b5;
                opacity: 0;
                opacity: 1;
                -webkit-animation: mdui-spinner-layer-fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1) infinite both;
                animation: mdui-spinner-layer-fill-unfill-rotate 5332ms cubic-bezier(.4, 0, .2, 1) infinite both
            }

            @-webkit-keyframes mdui-spinner-layer-fill-unfill-rotate {
                12.5% {
                    -webkit-transform: rotate(135deg);
                    transform: rotate(135deg)
                }

                25% {
                    -webkit-transform: rotate(270deg);
                    transform: rotate(270deg)
                }

                37.5% {
                    -webkit-transform: rotate(405deg);
                    transform: rotate(405deg)
                }

                50% {
                    -webkit-transform: rotate(540deg);
                    transform: rotate(540deg)
                }

                62.5% {
                    -webkit-transform: rotate(675deg);
                    transform: rotate(675deg)
                }

                75% {
                    -webkit-transform: rotate(810deg);
                    transform: rotate(810deg)
                }

                87.5% {
                    -webkit-transform: rotate(945deg);
                    transform: rotate(945deg)
                }

                to {
                    -webkit-transform: rotate(1080deg);
                    transform: rotate(1080deg)
                }
            }

            @keyframes mdui-spinner-layer-fill-unfill-rotate {
                12.5% {
                    -webkit-transform: rotate(135deg);
                    transform: rotate(135deg)
                }

                25% {
                    -webkit-transform: rotate(270deg);
                    transform: rotate(270deg)
                }

                37.5% {
                    -webkit-transform: rotate(405deg);
                    transform: rotate(405deg)
                }

                50% {
                    -webkit-transform: rotate(540deg);
                    transform: rotate(540deg)
                }

                62.5% {
                    -webkit-transform: rotate(675deg);
                    transform: rotate(675deg)
                }

                75% {
                    -webkit-transform: rotate(810deg);
                    transform: rotate(810deg)
                }

                87.5% {
                    -webkit-transform: rotate(945deg);
                    transform: rotate(945deg)
                }

                to {
                    -webkit-transform: rotate(1080deg);
                    transform: rotate(1080deg)
                }
            }

            @-webkit-keyframes mdui-spinner-layer-1-fade-in-out {
                from {
                    opacity: 1
                }

                25% {
                    opacity: 1
                }

                26% {
                    opacity: 0
                }

                89% {
                    opacity: 0
                }

                90% {
                    opacity: 1
                }

                100% {
                    opacity: 1
                }
            }

            @keyframes mdui-spinner-layer-1-fade-in-out {
                from {
                    opacity: 1
                }

                25% {
                    opacity: 1
                }

                26% {
                    opacity: 0
                }

                89% {
                    opacity: 0
                }

                90% {
                    opacity: 1
                }

                100% {
                    opacity: 1
                }
            }

            @-webkit-keyframes mdui-spinner-layer-2-fade-in-out {
                from {
                    opacity: 0
                }

                15% {
                    opacity: 0
                }

                25% {
                    opacity: 1
                }

                50% {
                    opacity: 1
                }

                51% {
                    opacity: 0
                }
            }

            @keyframes mdui-spinner-layer-2-fade-in-out {
                from {
                    opacity: 0
                }

                15% {
                    opacity: 0
                }

                25% {
                    opacity: 1
                }

                50% {
                    opacity: 1
                }

                51% {
                    opacity: 0
                }
            }

            @-webkit-keyframes mdui-spinner-layer-3-fade-in-out {
                from {
                    opacity: 0
                }

                40% {
                    opacity: 0
                }

                50% {
                    opacity: 1
                }

                75% {
                    opacity: 1
                }

                76% {
                    opacity: 0
                }
            }

            @keyframes mdui-spinner-layer-3-fade-in-out {
                from {
                    opacity: 0
                }

                40% {
                    opacity: 0
                }

                50% {
                    opacity: 1
                }

                75% {
                    opacity: 1
                }

                76% {
                    opacity: 0
                }
            }

            @-webkit-keyframes mdui-spinner-layer-4-fade-in-out {
                from {
                    opacity: 0
                }

                65% {
                    opacity: 0
                }

                75% {
                    opacity: 1
                }

                90% {
                    opacity: 1
                }

                100% {
                    opacity: 0
                }
            }

            @keyframes mdui-spinner-layer-4-fade-in-out {
                from {
                    opacity: 0
                }

                65% {
                    opacity: 0
                }

                75% {
                    opacity: 1
                }

                90% {
                    opacity: 1
                }

                100% {
                    opacity: 0
                }
            }

            .mdui-spinner-gap-patch {
                position: absolute;
                top: 0;
                left: 45%;
                width: 10%;
                height: 100%;
                overflow: hidden;
                border-color: inherit
            }

            .mdui-spinner-gap-patch .mdui-spinner-circle {
                left: -450%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: 1000%
            }

            .mdui-spinner-circle-clipper {
                position: relative;
                display: inline-block;
                width: 50%;
                height: 100%;
                overflow: hidden;
                border-color: inherit
            }

            .mdui-spinner-circle-clipper .mdui-spinner-circle {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: 200%;
                height: 100%;
                border-color: inherit;
                border-style: solid;
                border-width: 3px;
                border-bottom-color: transparent !important;
                border-radius: 50%;
                -webkit-animation: none;
                animation: none
            }

            .mdui-spinner-circle-clipper.mdui-spinner-left {
                float: left
            }

            .mdui-spinner-circle-clipper.mdui-spinner-left .mdui-spinner-circle {
                left: 0;
                border-right-color: transparent !important;
                -webkit-transform: rotate(129deg);
                transform: rotate(129deg);
                -webkit-animation: mdui-spinner-left-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both;
                animation: mdui-spinner-left-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both
            }

            .mdui-spinner-circle-clipper.mdui-spinner-right {
                float: right
            }

            .mdui-spinner-circle-clipper.mdui-spinner-right .mdui-spinner-circle {
                left: -100%;
                border-left-color: transparent !important;
                -webkit-transform: rotate(-129deg);
                transform: rotate(-129deg);
                -webkit-animation: mdui-spinner-right-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both;
                animation: mdui-spinner-right-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite both
            }

            @-webkit-keyframes mdui-spinner-left-spin {
                from {
                    -webkit-transform: rotate(130deg);
                    transform: rotate(130deg)
                }

                50% {
                    -webkit-transform: rotate(-5deg);
                    transform: rotate(-5deg)
                }

                to {
                    -webkit-transform: rotate(130deg);
                    transform: rotate(130deg)
                }
            }

            @keyframes mdui-spinner-left-spin {
                from {
                    -webkit-transform: rotate(130deg);
                    transform: rotate(130deg)
                }

                50% {
                    -webkit-transform: rotate(-5deg);
                    transform: rotate(-5deg)
                }

                to {
                    -webkit-transform: rotate(130deg);
                    transform: rotate(130deg)
                }
            }

            @-webkit-keyframes mdui-spinner-right-spin {
                from {
                    -webkit-transform: rotate(-130deg);
                    transform: rotate(-130deg)
                }

                50% {
                    -webkit-transform: rotate(5deg);
                    transform: rotate(5deg)
                }

                to {
                    -webkit-transform: rotate(-130deg);
                    transform: rotate(-130deg)
                }
            }

            @keyframes mdui-spinner-right-spin {
                from {
                    -webkit-transform: rotate(-130deg);
                    transform: rotate(-130deg)
                }

                50% {
                    -webkit-transform: rotate(5deg);
                    transform: rotate(5deg)
                }

                to {
                    -webkit-transform: rotate(-130deg);
                    transform: rotate(-130deg)
                }
            }
        </style>
        <div>
            <div class="mdui-spinner">
                <div class="mdui-spinner-layer ">
                    <div class="mdui-spinner-circle-clipper mdui-spinner-left">
                        <div class="mdui-spinner-circle"></div>
                    </div>
                    <div class="mdui-spinner-gap-patch">
                        <div class="mdui-spinner-circle"></div>
                    </div>
                    <div class="mdui-spinner-circle-clipper mdui-spinner-right">
                        <div class="mdui-spinner-circle"></div>
                    </div>
                </div>
            </div>
        </div>
        <b>Loading...</b>
        <span id="lodingtext"><noscript>请问你JavaScript启用了吗？</noscript></span>
        <script>
            !async function () {
                const noshow = ["吼！隐身术！"]
                const d = document.getElementById("lodingtext")
                const data = [
                    "Code Dream Star",
                    "听说打开控制台会有奇妙的事情？",
                    "你们都给我变彩蛋，变好多好多的彩蛋，变各种各样的彩蛋，我就喜欢，变给我看",
                    "彩蛋彩蛋快出来，彩蛋彩蛋不出来，彩蛋彩蛋出不来，自己来做，我飞~",
                    "你可能不知道！Code Blockly有∞个彩蛋！",
                    noshow
                ];
                d.innerText = data[~~(Math.random() * data.length)];
                if (d.innerText.includes(noshow)) {
                    d.style.color = "#fff0"
                }
            }();
        </script>
    </div>
    <!-- 导入Google Blockly -->
    <script src="../../blockly/blockly_compressed.js"></script>
    <script src="../../blockly/blocks_compressed.js"></script>
    <script src="../../blockly/python_compressed.js"></script>
    <script src="../../blockly/msg/zh-hans.js"></script>
    <!-- 导入积木+/-按钮插件-->
    <script src="../../static/js/block-plus-minus.js"></script>
    <!--Python基础积木-->
    <script src="../../static/block/py-dev/events.js"></script>
    <!--Python字典积木 -->
    <script src="../../static/block/py-dev/dict.js"></script>
    <!--Python第三方库-->
    <script src="../../static/block/py-dev/os.js"></script>
    <script src="../../static/block/py-dev/requests.js"></script>
    <!--导入SweetAlert-->
    <script src="../../static/js/sweetalert.js"></script>
    <!--导入mdui-->
    <link rel="stylesheet" href="../../static/mdui/css/mdui.min.css" />
    <script src="../../static/mdui/js/mdui.min.js"></script>
    <!-- 导入hljs -->
    <script src="../../static/js/hljs.js"></script>
    <!-- 导入jq -->
    <script src="../../static/js/jq.js"></script>
    <!-- 图标库  -->
    <script
        src="../../static/js/icons.js"></script>
    <link rel="stylesheet" href="../../static/css/style.css" />
    <!--来自于 IconPark https://iconpark.oceanengine.com/official-->
    <svg style="position: absolute;width: 0px;height: 0px;overflow: hidden;" aria-hidden="true">
        <symbol viewBox="0 0 48 48" id="icon-撤销" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd"
                d="M44 40.8361C39.1069 34.8632 34.7617 31.4739 30.9644 30.6682C27.1671 29.8625 23.5517 29.7408 20.1182 30.303V41L4 23.5453L20.1182 7V17.167C26.4667 17.2172 31.8638 19.4948 36.3095 24C40.7553 28.5052 43.3187 34.1172 44 40.8361Z"
                fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-重做" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd"
                d="M44 40.8361C39.1069 34.8632 34.7617 31.4739 30.9644 30.6682C27.1671 29.8625 23.5517 29.7408 20.1182 30.303V41L4 23.5453L20.1182 7V17.167C26.4667 17.2172 31.8638 19.4948 36.3095 24C40.7553 28.5052 43.3187 34.1172 44 40.8361Z"
                fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-放大" fill="none">
            <path
                d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"
                fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
            <path d="M21 15L21 27" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M15.0156 21.0156L27 21" stroke="#333" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
            <path d="M33.2216 33.2217L41.7069 41.707" stroke="#333" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-缩小" fill="none">
            <path
                d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"
                fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
            <path d="M15 21L27 21" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M33.2216 33.2217L41.7069 41.707" stroke="#333" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-复制" fill="none">
            <path
                d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163"
                stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path
                d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z"
                fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-复制-白" fill="none">
            <path
                d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163"
                stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path
                d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z"
                fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-代码" fill="none">
            <path d="M16 13L4 25.4322L16 37" stroke="#333" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
            <path d="M32 13L44 25.4322L32 37" stroke="#333" stroke-width="4" stroke-linecap="round"
                stroke-linejoin="round" />
            <path d="M28 4L21 44" stroke="#333" stroke-width="4" stroke-linecap="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-预览" fill="none">
            <rect x="4" y="8" width="40" height="32" rx="3" stroke="#333" stroke-width="4" stroke-linejoin="round" />
            <path d="M4 11C4 9.34315 5.34315 8 7 8H41C42.6569 8 44 9.34315 44 11V20H4V11Z" fill="none" stroke="#333"
                stroke-width="4" />
            <circle r="2" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 10 14)" fill="#333" />
            <circle r="2" transform="matrix(-1.31134e-07 -1 -1 1.31134e-07 16 14)" fill="#333" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-关闭" fill="none">
            <path d="M8 8L40 40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M8 40L40 8" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-关闭-白" fill="none">
            <path d="M8 8L40 40" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M8 40L40 8" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-垃圾桶" fill="none">
            <path d="M9 10V44H39V10H9Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
            <path d="M20 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M28 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M4 10H44" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#333" stroke-width="4"
                stroke-linejoin="round" />
        </symbol>
        <symbol viewBox="0 0 48 48" id="icon-搜素" fill="none">
            <path d="M4 7H44" stroke="#333" stroke-width="4" stroke-linecap="round" />
            <path d="M4 23H15" stroke="#333" stroke-width="4" stroke-linecap="round" />
            <path d="M4 39H15" stroke="#333" stroke-width="4" stroke-linecap="round" />
            <path
                d="M31.5 34C36.1944 34 40 30.1944 40 25.5C40 20.8056 36.1944 17 31.5 17C26.8056 17 23 20.8056 23 25.5C23 30.1944 26.8056 34 31.5 34Z"
                fill="none" stroke="#333" stroke-width="4" />
            <path d="M37 32L44 39.0505" stroke="#333" stroke-width="4" stroke-linecap="round" />
        </symbol>
    </svg>
    <!--app -->
    <div id="app">
        <!-- 右下角导航栏 -->
        <div class="right-bottom-navigation-bar">
            <!-- <div class="right-bottom-navigation-bar-div" data-tip="撤销">
                <div class="right-bottom-navigation-bar-div-svg">
                    <svg>
                        <use xlink:href="#icon-撤销"></use>
                    </svg>
                </div>
            </div>
            <div class="right-bottom-navigation-bar-div" data-tip="重做">
                <div class="right-bottom-navigation-bar-div-svg" style="transform: rotate3d(0, 1, 0, 180deg)">
                    <svg>
                        <use xlink:href="#icon-重做"></use>
                    </svg>
                </div>
            </div> -->
            <div class="right-bottom-navigation-bar-division"></div>
            <div class="right-bottom-navigation-bar-div" data-tip="缩小">
                <div class="right-bottom-navigation-bar-div-svg">
                    <svg>
                        <use xlink:href="#icon-缩小"></use>
                    </svg>
                </div>
            </div>
            <div class="right-bottom-navigation-bar-text" data-tip="恢复回100%">
                100%
            </div>
            <div class="right-bottom-navigation-bar-div" data-tip="放大">
                <div class="right-bottom-navigation-bar-div-svg">
                    <svg>
                        <use xlink:href="#icon-放大"></use>
                    </svg>
                </div>
            </div>
            <div class="right-bottom-navigation-bar-division"></div>
            <div class="right-bottom-navigation-bar-div" data-tip="代码">
                <div class="right-bottom-navigation-bar-div-svg">
                    <svg>
                        <use xlink:href="#icon-代码"></use>
                    </svg>
                </div>
            </div>
            <div class="right-bottom-navigation-bar-div" data-tip="预览">
                <div class="right-bottom-navigation-bar-div-svg">
                    <svg>
                        <use xlink:href="#icon-预览"></use>
                    </svg>
                </div>
            </div>
        </div>
        <!-- 代码弹窗 -->
        <div class="code-dialog">
            <code>
                    <a class="hljs-comment"></a>
                </code>
            <div class="code-dialog-button" left data-tip="复制代码">
                <div class="code-dialog-button-svg">
                    <svg>
                        <use xlink:href="#icon-复制-白"></use>
                    </svg>
                </div>
            </div>
            <div class="code-dialog-button" right data-tip="关闭预览">
                <div class="code-dialog-button-svg">
                    <svg>
                        <use xlink:href="#icon-关闭-白"></use>
                    </svg>
                </div>
            </div>
        </div>
        <div class="mdui-appbar mdui-appbar-fixed">
            <div class="mdui-toolbar mdui-color-indigo-0 ">
                <img src="../../static/logo/logo_dev_lite.svg" height="40">
                <a class="mdui-typo-title" mdui-menu="{target: '#top-menu1'}">文件</a>
                <a class="mdui-typo-title" mdui-menu="{target: '#top-menu2'}">更多</a>
                <ul class="mdui-menu" id="top-menu1">
                    <li class="mdui-menu-item" d="2"><a d="2">保存作品</a></li>
                    <li class="mdui-menu-item" d="3"><a d="3">保存作品到本地</a></li>
                    <li class="mdui-menu-item" d="4"><a d="4">打开本地作品</a></li>
                    <li class="mdui-menu-item" d="5"><a d="5">保存为py文件</a></li>
                </ul>
                <ul class="mdui-menu" id="top-menu2">
                    <li class="mdui-menu-item" d="7"><a d="7">文档</a></li>
                    <li class="mdui-menu-item" d="8"><a d="8">选项</a></li>
                </ul>
            </div>
        </div>
        <!-- 选项弹窗 -->
        <div class="mdui-dialog mdui-dialog-alert settingsdialog">
            <div class="mdui-dialog-title mdui-color-indigo mdui-p-y-2">
                <button class="mdui-btn mdui-btn-icon" mdui-dialog-close>×</button>
                <span>选项</span>
            </div>
            <div class="mdui-tab mdui-tab-full-width" id="settingsdialog-tab">
                <a href="#settingsdialog-tab1">设置</a>
                <a href="#settingsdialog-tab2">关于</a>
                <a href="#settingsdialog-tab3">感谢</a>
            </div>
            <div id="settingsdialog-tab1">
                <ul class="mdui-list">
                    <li class="mdui-subheader">积木</li>
                    <label class="mdui-list-item">
                        <div class="mdui-list-item-content">积木插入高亮显示</div>
                        <li class="mdui-switch">
                            <input type="checkbox" onchange="updatasettings(this, 0,'c')" class="SettingsdialogId0-c" />
                            <i class="mdui-switch-icon"></i>
                        </li>
                    </label>
                    <label class="mdui-list-item">
                        <div class="mdui-list-item-content">积木插入动画圆圈</div>
                        <li class="mdui-switch">
                            <input type="checkbox" onchange="updatasettings(this, 1,'c')" class="SettingsdialogId1-c" />
                            <i class="mdui-switch-icon"></i>
                        </li>
                    </label>
                    <label class="mdui-list-item">
                        <div class="mdui-list-item-content">下拉框美化</div>
                        <li class="mdui-switch">
                            <input type="checkbox" onchange="updatasettings(this,2,'c')" class="SettingsdialogId2-c" />
                            <i class="mdui-switch-icon"></i>
                        </li>
                    </label>
                    <li class="mdui-subheader">预览</li>
                    <div class="mdui-list-item">
                        <div class="mdui-list-item-content">预览模式</div>
                        <select class="mdui-select SettingsdialogId1-s" mdui-select="{position: 'top'}"
                            onchange="updatasettings(this, 1,'s')">
                            <option value="_target" disabled>在线（未开发）</option>
                            <option value="newtab">新标签页</option>
                            <option value="newdialog">新窗口</option>
                        </select>
                    </div>
                </ul>
            </div>
            <div id="settingsdialog-tab2" class="mdui-p-a-2" align="center">
                <img src="../../static/logo/logo_dev.svg" height="60">
                <h2>Code Blokly Dev</h2>
                <p></p>
            </div>
            <div id="settingsdialog-tab3" class="mdui-p-a-2" align="center">
                <p>Google Blockly</p>
                <p>MDUI</p>
                <p>SweetAlert</p>
                <p>JQuery</p>
                <p>PyScript</p>
            </div>
        </div>
        <!-- 删除垃圾桶 -->
        <div class="blocklyToolboxDelete delect-block-zone" style="width: 72px;"><svg xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="64" id="delete-svg-up"
                class="delete-svg" height="16" viewBox="0 0 64 16">
                <g style="mix-blend-mode:passthrough">
                    <path
                        d="M17,0C13.6863,0,11,2.68629,11,6L11,8L4,8C1.79086,8,0,9.79086,0,12C0,14.2091,1.79086,16,4,16L60,16C62.2091,16,64,14.2091,64,12C64,9.79086,62.2091,8,60,8L53,8L53,6C53,2.68629,50.3137,0,47,0L17,0Z"
                        fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"></path>
                </g>
            </svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
                version="1.1" width="52" id="delete-svg-down" class="delete-svg" height="45" viewBox="0 0 52 45">
                <g style="mix-blend-mode:passthrough">
                    <path
                        d="M0,3C0,1.34315,1.34315,0,3,0L49,0C50.6569,0,52,1.34315,52,3L52,36C52,40.9706,47.9706,45,43,45L9,45C4.02944,45,0,40.9706,0,36L0,3ZM11,12.5C11,10.0147,13.0147,8,15.5,8C17.9853,8,20,10.0147,20,12.5L20,32.5C20,34.9853,17.9853,37,15.5,37C13.0147,37,11,34.9853,11,32.5L11,12.5ZM35.5,8C33.0147,8,31,10.0147,31,12.5L31,32.5C31,34.9853,33.0147,37,35.5,37C37.9853,37,40,34.9853,40,32.5L40,12.5C40,10.0147,37.9853,8,35.5,8Z"
                        fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"></path>
                </g>
            </svg></div>
        <!-- 历史垃圾桶 -->
        <!-- <div class="history-trash-btn"><svg xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="64" id="delete-svg-up"
                height="16" viewBox="0 0 64 16">
                <g style="mix-blend-mode:passthrough">
                    <path
                        d="M17,0C13.6863,0,11,2.68629,11,6L11,8L4,8C1.79086,8,0,9.79086,0,12C0,14.2091,1.79086,16,4,16L60,16C62.2091,16,64,14.2091,64,12C64,9.79086,62.2091,8,60,8L53,8L53,6C53,2.68629,50.3137,0,47,0L17,0Z"
                        fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"></path>
                </g>
            </svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
                version="1.1" width="52" id="delete-svg-down" height="45" viewBox="0 0 52 45">
                <g style="mix-blend-mode:passthrough">
                    <path
                        d="M0,3C0,1.34315,1.34315,0,3,0L49,0C50.6569,0,52,1.34315,52,3L52,36C52,40.9706,47.9706,45,43,45L9,45C4.02944,45,0,40.9706,0,36L0,3ZM11,12.5C11,10.0147,13.0147,8,15.5,8C17.9853,8,20,10.0147,20,12.5L20,32.5C20,34.9853,17.9853,37,15.5,37C13.0147,37,11,34.9853,11,32.5L11,12.5ZM35.5,8C33.0147,8,31,10.0147,31,12.5L31,32.5C31,34.9853,33.0147,37,35.5,37C37.9853,37,40,34.9853,40,32.5L40,12.5C40,10.0147,37.9853,8,35.5,8Z"
                        fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"></path>
                </g>
            </svg>
        </div> -->
        <!-- 搜索 -->
        <!-- <div class="search-block-btn">
            <svg>
                <use xlink:href="#icon-搜素"></use>
            </svg>
        </div> -->
        <!-- 工作区 -->
        <div class="workzone">
            <div id="blocklyDiv"></div>
        </div>
        <!-- 积木定义xml -->
    </div>
    <xml id="toolbox" style="display: none">
        <category name="事件" category_id="%color events">
            <block type="events_print">
                <value name="print_text">
                    <block type="text">
                        <field name="TEXT">一些内容</field>
                    </block>
                </value>
            </block>
            <block type="events_comment"></block>
            <block type="events_import"></block>
            <block type="events_import_library_as"></block>
            <block type="events_from_import"></block>
            <block type="events_input">
                <value name="print_text">
                    <block type="text">
                        <field name="TEXT">一些内容</field>
                    </block>
                </value>
            </block>
            <block type="events_input_get"></block>
        </category>
        <category name="控制" category_id="%color control">
            <block type="controls_if"></block>
            <block type="controls_if">
                <mutation else="1" />
            </block>
            <block type="controls_repeat_ext" category_id="#8ca6c0">
                <value name="TIMES">
                    <block type="math_number">
                        <field name="NUM">10</field>
                    </block>
                </value>
            </block>
            <block type="controls_whileUntil" category_id="#8ca6c0"></block>
            <block type="controls_for" category_id="#8ca6c0">
                <field name="VAR" id="57g(4![Bc(~B67SRUvvd">i</field>
                <value name="FROM">
                    <block type="math_number">
                        <field name="NUM">1</field>
                    </block>
                </value>
                <value name="TO">
                    <block type="math_number">
                        <field name="NUM">10</field>
                    </block>
                </value>
                <value name="BY">
                    <block type="math_number">
                        <field name="NUM">1</field>
                    </block>
                </value>
            </block>
            <block type="controls_forEach" category_id="#8ca6c0">
                <field name="VAR" id="=ea2SQ,8Dye^#~zQHfJV">j</field>
            </block>
            <block type="controls_flow_statements" category_id="#8ca6c0"></block>
        </category>
        <category name="运算" category_id="%color math">
            <label text="数学"></label>
            <block type="math_number">
                <field name="NUM">1086</field>
            </block>
            <block type="math_arithmetic">
                <value name="A">
                    <block type="math_number">
                        <field name="NUM">1</field>
                    </block>
                </value>
                <value name="B">
                    <block type="math_number">
                        <field name="NUM">1</field>
                    </block>
                </value>
            </block>
            <block type="math_random_int">
                <value name="FROM">
                    <block type="math_number">
                        <field name="NUM">1</field>
                    </block>
                </value>
                <value name="TO">
                    <block type="math_number">
                        <field name="NUM">100</field>
                    </block>
                </value>
            </block>
            <block type="math_random_float"></block>
            <block type="math_number_property">
                <value name="NUMBER_TO_CHECK">
                    <block type="math_number">
                        <field name="NUM">0</field>
                    </block>
                </value>
            </block>
            <block type="math_single">
                <field name="OP">ROOT</field>
                <value name="NUM">
                    <block type="math_number">
                        <field name="NUM">9</field>
                    </block>
                </value>
            </block>
            <block type="math_trig">
                <field name="OP">SIN</field>
                <value name="NUM">
                    <block type="math_number">
                        <field name="NUM">45</field>
                    </block>
                </value>
            </block>
            <block type="math_constant"></block>
            <block type="math_round">
                <value name="NUM">
                    <block type="math_number">
                        <field name="NUM">3.14</field>
                    </block>
                </value>
            </block>
            <block type="math_on_list"></block>
            <block type="math_modulo">
                <value name="DIVIDEND">
                    <block type="math_number">
                        <field name="NUM">64</field>
                    </block>
                </value>
                <value name="DIVISOR">
                    <block type="math_number">
                        <field name="NUM">10</field>
                    </block>
                </value>
            </block>
            <block type="math_constrain">
                <value name="VALUE">
                    <block type="math_number">
                        <field name="NUM">50</field>
                    </block>
                </value>
                <value name="LOW">
                    <block type="math_number">
                        <field name="NUM">1</field>
                    </block>
                </value>
                <value name="HIGH">
                    <block type="math_number">
                        <field name="NUM">100</field>
                    </block>
                </value>
            </block>
            <label text="逻辑"></label>
            <block type="logic_compare"></block>
            <block type="logic_operation"></block>
            <block type="logic_boolean"></block>
            <block type="logic_negate"></block>
            <block type="logic_ternary"></block>
            <block type="logic_null"></block>
            <label text="字符串"></label>
            <block type="text">
                <field name="TEXT">Code Dream Star YYDS</field>
            </block>
            <block type="text_join">
                <mutation items="2"></mutation>
                <value name="ADD0">
                    <block type="text">
                        <field name="TEXT"></field>
                    </block>
                </value>
                <value name="ADD1">
                    <block type="text">
                        <field name="TEXT"></field>
                    </block>
                </value>
            </block>
            <block type="text_append">
                <value name="TEXT">
                    <block type="text">
                        <field name="TEXT"></field>
                    </block>
                </value>
            </block>
            <block type="text_length">
                <value name="MESSAGE">
                    <block type="text">
                        <field name="TEXT">abc</field>
                    </block>
                </value>
            </block>
            <block type="text_isEmpty">
                <value name="MESSAGE">
                    <block type="text">
                        <field name="TEXT"></field>
                    </block>
                </value>
            </block>
            <block type="text_indexOf">
                <field name="END">FIRST</field>
                <value name="VALUE">
                    <block type="variables_get">
                        <field name="VAR" id="o(H,3vpcGU*(B$;@WJos">text</field>
                    </block>
                </value>
                <value name="FIND">
                    <block type="text">
                        <field name="TEXT">abc</field>
                    </block>
                </value>
            </block>
            <block type="text_charAt">
                <mutation at="true" />
                <field name="WHERE">FROM_START</field>
                <value name="VALUE">
                    <block type="variables_get">
                        <field name="VAR" id="o(H,3vpcGU*(B$;@WJos">text</field>
                    </block>
                </value>
            </block>
            <block type="text_getSubstring">
                <mutation at1="true" at2="true" />
                <field name="WHERE1">FROM_START</field>
                <field name="WHERE2">FROM_START</field>
                <value name="STRING">
                    <block type="variables_get">
                        <field name="VAR" id="o(H,3vpcGU*(B$;@WJos">text</field>
                    </block>
                </value>
            </block>
            <block type="text_changeCase">
                <field name="CASE">UPPERCASE</field>
                <value name="TEXT">
                    <block type="text">
                        <field name="TEXT">abc</field>
                    </block>
                </value>
            </block>
            <block type="text_trim">
                <field name="MODE">BOTH</field>
                <value name="TEXT">
                    <block type="text">
                        <field name="TEXT">abc</field>
                    </block>
                </value>
            </block>
            <block type="text_count">
                <value name="SUB">
                    <block type="text">
                        <field name="TEXT">文</field>
                    </block>
                </value>
                <value name="TEXT">
                    <block type="text">
                        <field name="TEXT">文本</field>
                    </block>
                </value>
            </block>
            <block type="text_replace">
                <value name="FROM">
                    <block type="text">
                        <field name="TEXT">文</field>
                    </block>
                </value>
                <value name="TO">
                    <block type="text">
                        <field name="TEXT">纹</field>
                    </block>
                </value>
                <value name="TEXT">
                    <block type="text">
                        <field name="TEXT">文本</field>
                    </block>
                </value>
            </block>
            <block type="text_reverse">
                <value name="TEXT">
                    <block type="text">
                        <field name="TEXT">文本</field>
                    </block>
                </value>
            </block>
        </category>
        <category name="变量" category_id="%color varible" custom="VARIABLE"></category>
        <category name="列表" category_id="%color list">
            <block type="lists_create_with">
                <mutation items="1" />
            </block>
            <block type="lists_create_with">
                <mutation items="3" />
            </block>
            <block type="lists_repeat">
                <value name="NUM">
                    <block type="math_number">
                        <field name="NUM">5</field>
                    </block>
                </value>
            </block>
            <block type="lists_length"></block>
            <block type="lists_isEmpty"></block>
            <block type="lists_indexOf">
                <field name="END">FIRST</field>
                <value name="VALUE">
                    <block type="variables_get">
                        <field name="VAR" id="2G;)Eq${Io2,L:Ql*.Z7">list</field>
                    </block>
                </value>
            </block>
            <block type="lists_getIndex">
                <mutation statement="false" at="true" />
                <field name="MODE">GET</field>
                <field name="WHERE">FROM_START</field>
                <value name="VALUE">
                    <block type="variables_get">
                        <field name="VAR" id="2G;)Eq${Io2,L:Ql*.Z7">list</field>
                    </block>
                </value>
            </block>
            <block type="lists_setIndex">
                <mutation at="true" />
                <field name="MODE">SET</field>
                <field name="WHERE">FROM_START</field>
                <value name="LIST">
                    <block type="variables_get">
                        <field name="VAR" id="2G;)Eq${Io2,L:Ql*.Z7">list</field>
                    </block>
                </value>
            </block>
            <block type="lists_getSublist">
                <mutation at1="true" at2="true" />
                <field name="WHERE1">FROM_START</field>
                <field name="WHERE2">FROM_START</field>
                <value name="LIST">
                    <block type="variables_get">
                        <field name="VAR" id="2G;)Eq${Io2,L:Ql*.Z7">list</field>
                    </block>
                </value>
            </block>
            </block>
            <block type="lists_split">
                <mutation mode="SPLIT" />
                <field name="MODE">SPLIT</field>
                <value name="DELIM">
                    <block type="text">
                        <field name="TEXT">,</field>
                    </block>
                </value>
            </block>
            <block type="lists_sort">
                <field name="TYPE">NUMERIC</field>
                <field name="DIRECTION">1</field>
            </block>
        </category>
        <category name="字典" category_id="%color object">
            <block type="dict_null"></block>
            <block type="dict_set"></block>
            <block type="dict_get"></block>
            <block type="dict_delete"></block>
            <block type="dict_inc"></block>
            <block type="dict_geto"></block>
            <block type="dict_copy"></block>
            <block type="dict_clear"></block>
            <block type="dict_is_empty"></block>
        </category>
        <category name="函数" category_id="%color function" custom="PROCEDURE"></category>
        <sep></sep>
        <category name="爬虫" category_id="%color requests">
            <block type="requests_get"></block>
            <block type="requests_post"></block>
        </category>
        <category name="OS库" category_id="%color os">
            <block type="os_access"></block>
            <block type="os_chdir"></block>
            <block type="os_chflags"></block>
            <block type="os_Permission_detection"></block>
            <block type="os_set_permissions"></block>
            <block type="os_modifying_the_root_directory"></block>
            <block type="os_close_descriptor"></block>
            <block type="os_close_all_descriptors"></block>
            <block type="os_copy_the_file_descriptor"></block>
            <block type="os_descriptor_substitution"></block>
            <block type="os_descriptor_changedir"></block>
            <block type="os_modifying_file_permissions"></block>
            <block type="os_type_selection"></block>
            <block type="os_change_file_ownership"></block>
            <block type="os_force_write"></block>
            <block type="os_create_file"></block>
            <block type="os_file_setting"></block>
            <block type="os_system_configuration_information"></block>
            <block type="os_acquisition_state"></block>
            <block type="os_status"></block>
        </category>
        <sep></sep>
        <category name="搜索" category_id="search">
            <label text="搜索积木"></label>
            <button text="开始" callbackkey="search start"></button>
        </category>
        <category name="历史" category_id="garbage">
            <button text="点我清空" callbackkey="Clear history"></button>
            <label text="空空如也"></label>
        </category>
    </xml>
    <!-- 加载blockly -->
    <script src="./script/custom-renderer.js"></script>
    <script src="../../static/js/config.js"></script>
    <script src="./script/index.js"></script>
    <script src="../../static/files/colour/egg/ceg.js"></script>
    <script src="./script/files.js"></script>
</body>

</html>